<template>
  <view class="box" style="color:#000;">
    <location-in-ovo-user-card
        class="location-in-ovo-user-card"
    ></location-in-ovo-user-card>
    <view>
      <ovo-avatar
      size="120rpx"
      ></ovo-avatar>
      <view class="info">
        <view class="nickname">亚里士多德</view>
        <view style="height: 5rpx"></view>
        <common-info-in-ovo-user-card></common-info-in-ovo-user-card>
        <view class="split"></view>
        <view class="introduction">我是一个哲学家，我是一个哲学家，我是一个哲学家，我是一个哲学家</view>
      </view>
    </view>
  </view>
</template>

<script>

import LocationInOvoUserCard from "@/components/ovo-user-card/location-in-ovo-user-card.vue";
import CommonInfoInOvoUserCard from "@/components/ovo-user-card/common-info-in-ovo-user-card.vue";

export default {
  name: "ovo-user-info",
  components: {CommonInfoInOvoUserCard, LocationInOvoUserCard},
  props: {
  },
  data() {
    return {
    };
  },
  created(){
  },
  methods: {

  },
  watch: {
  },
}
</script>


<style lang="scss" scoped>
.box{
  position: relative;
  width: 100%;
}
.location-in-ovo-user-card{
  position: absolute;
  top: 15rpx;
  right: 20rpx;
}
.info{
  float: right;
  vertical-align: top;
  width: calc(100% - 120rpx);
  padding: 0 20rpx;
  margin-top: -5rpx;
  box-sizing: border-box;
}

.nickname{
  font-size: 28rpx;
  letter-spacing: 5rpx;
}

.introduction{
  font-size: 22rpx;
  color: #555555;
  // 超出，以省略号显示
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split{
  height: 10rpx;
}
</style>